// src/components/popups/sponsorOverview/companyContactsList/ResultTable.tsx

import type { FC } from 'react';
import type { CompanyContactsItem } from '@/services/sponsorDashboardService/sponsorContactsByGroup';

interface CompanyContactTableResultProps {
  data: CompanyContactsItem[];
  sortField: 'company_name' | 'first_name' | 'last_name' | 'position_title' | 'email' | 'phone' | 'mobile' | 'kc' | 'inv' | 'program_code' | 'faculty' | 'coop_program' | 'program_year' | 'status';
  sortDirection: 'asc' | 'desc';
  onSortChange: (field: 'company_name' | 'first_name' | 'last_name' | 'position_title' | 'email' | 'phone' | 'mobile' | 'kc' | 'inv' | 'program_code' | 'faculty' | 'coop_program' | 'program_year' | 'status', direction: 'asc' | 'desc') => void;
}

const ResultTable: FC<CompanyContactTableResultProps> = ({
  data,
  sortField,
  sortDirection,
  onSortChange
}) => {
  const headers = [
    { key: 'company_name', label: 'Company Name' },
    { key: 'first_name', label: 'First Name' },
    { key: 'last_name', label: 'Last Name' },
    { key: 'position_title', label: 'Position Title' },
    { key: 'email', label: 'Email' },
    { key: 'phone', label: 'Phone' },
    { key: 'mobile', label: 'Mobile' },
    { key: 'kc', label: 'KC' },
    { key: 'inv', label: 'INV' },
    { key: 'program_code', label: 'Program Code' },
    { key: 'faculty', label: 'Faculty' },
    { key: 'coop_program', label: 'Co-op Program' },
    { key: 'program_year', label: 'Program Year' },
    { key: 'status', label: 'Status' },
  ];

  const handleHeaderClick = (field: typeof sortField) => {
    if (sortField === field) {
      onSortChange(field, sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      onSortChange(field, 'asc');
    }
  };

  const getSortArrow = (field: typeof sortField) => {
    if (sortField !== field) {
      return null;
    }
    return sortDirection === 'asc' ? ' ↑' : ' ↓';
  };

  return (
    <div className="w-full overflow-x-auto mt-4 rounded-2xl shadow bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800">
      <table className="w-full text-xs sm:text-sm md:text-base rounded-2xl overflow-hidden">
        <thead className="bg-blue-50 dark:bg-slate-800 border-b-2 border-gray-200 dark:border-slate-700 shadow-sm">
          <tr>
            {headers.map((header) => (
              <th
                key={header.key}
                className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => handleHeaderClick(header.key as typeof sortField)}
              >
                {header.label}{getSortArrow(header.key as typeof sortField)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.length === 0 ? (
            <tr>
              <td
                colSpan={headers.length}
                className="text-center py-6 text-gray-400 dark:text-gray-500 italic bg-gray-50 dark:bg-slate-900 rounded-b-2xl text-xs sm:text-sm md:text-base"
              >
                No contact records found.
              </td>
            </tr>
          ) : (
            data.map((row, idx) => (
              <tr key={`${row.sponsor_contact_id}-${idx}`} className="hover:bg-blue-50 dark:hover:bg-slate-700 transition text-xs sm:text-sm md:text-base border-b border-gray-100 dark:border-slate-700">
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.company_name || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.first_name || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.last_name || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.position_title || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.email || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.phone || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.mobile || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.kc || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.inv || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.program_code || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.faculty || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.coop_program || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.program_year || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.status || '-'}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default ResultTable;